<template>
	<view class="page-container">
		<!-- #ifndef MP-TOUTIAO -->
		<!-- 自定义导航 -->
		<view class="fixed" :style="{height: stickyHeight + 'px'}" v-if="isFixed">
			<view class="navigation-title-bar">{{pageTitle}}</view>
		</view>
		<!-- #endif -->

		<!-- banner -->
		<view class="banner">
			<view class="search-bar"
				:style="{height: menuHeight + 'px', lineHeight: menuHeight + 'px', top: searchOffsetTop + 'px'}"
				@click="jumpGlobalSearch">
				<text class="icon iconfont">&#xe686;</text>
				<text class="desc">{{uniHotSearchDefault}}</text>
			</view>
			<swiper class="swiper" indicator-dots="true" indicator-color="rgba(255,255,255,.7)" duration="300"
				autoplay="true" interval="5000" indicator-active-color="#fff">
				<swiper-item v-for="item in bannerList" :key="item.id">
					<image :src="item.adsrc" mode="scaleToFill" @click="toAds(item)"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="page-wrapper">
			<!-- 导航模块 -->
			<view class="uni-nav-block">
				<view class="uni-nav-item" v-for="item in navList" :key="item.id" @click="toNavPage(item)">
					<image class="icon" :src="item.m_ico" mode="scaleToFill"></image>
					<view class="text">{{item.m_title}}</view>
				</view>
			</view>

			<!-- 通知栏 -->
			<uni-notice-bar v-if="noticeText" class="uni-notice-bar" scrollable showIcon single :speed="100"
				color="#FF7818" :text="noticeText"></uni-notice-bar>

			<!-- 热门活动 -->
			<view class="hot-ad-block" v-if="hotBanners.length">
				<view class="hot-ad-bar">热门活动</view>
				<swiper class="swiper-container" :interval="5000" next-margin="160px" circular :duration="300">
					<swiper-item class="item" v-for="item in hotBanners" :key="item.id">
						<view class="slide">
							<image class="img" :src="item.adsrc" mode="scaleToFill" @click="toAds(item)"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<!-- 必玩榜单 -->
			<view class="rank-block" v-if="ticketList.length || foodList.length || hotelList.length">
				<view class="rank-bar">必玩榜单</view>
				<swiper class="swiper-rank-container" next-margin="72px" circular :interval="5000" :duration="300">
					<swiper-item v-if="ticketList.length">
						<view class="swiper-slide swiper-play-slide">
							<view class="swiper-item-bar swiper-play-bar">
								<view class="tit">玩什么</view>
								<view class="more" @click="toTicketList">更多</view>
							</view>
							<view class="swiper-ul">
								<view class="li" v-for="(item, index) in ticketList" :key="item.id"
									@click="toDetail(item)">
									<image class="icon" v-if="index === 0"
										:src="'https://static.member.stourweb.cn/uniapp/static/images/' + 'play_icon_01.png'"
										mode="scaleToFill"></image>
									<image class="icon" v-if="index === 1"
										:src="'https://static.member.stourweb.cn/uniapp/static/images/' + 'play_icon_02.png'"
										mode="scaleToFill"></image>
									<image class="icon" v-if="index === 2"
										:src="'https://static.member.stourweb.cn/uniapp/static/images/' + 'play_icon_03.png'"
										mode="scaleToFill"></image>
									<image class="hd" :src="item.litpic" mode="scaleToFill"></image>
									<view class="bd">
										<view class="tit">{{item.title}}</view>
										<view class="ads">{{item.address}}</view>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item v-if="hasFoodApp && foodList.length">
						<view class="swiper-slide swiper-food-slide">
							<view class="swiper-item-bar swiper-food-bar">
								<view class="tit">吃什么</view>
								<view class="more" @click="toFoodList">更多</view>
							</view>
							<view class="swiper-ul">
								<view class="li" v-for="(item, index) in foodList" :key="item.id"
									@click="toDetail(item)">
									<image class="icon" v-if="index === 0"
										:src="'https://static.member.stourweb.cn/uniapp/static/images/' + 'food_icon_01.png'"
										mode="scaleToFill"></image>
									<image class="icon" v-if="index === 1"
										:src="'https://static.member.stourweb.cn/uniapp/static/images/' + 'food_icon_02.png'"
										mode="scaleToFill"></image>
									<image class="icon" v-if="index === 2"
										:src="'https://static.member.stourweb.cn/uniapp/static/images/' + 'food_icon_03.png'"
										mode="scaleToFill"></image>
									<image class="hd" :src="item.litpic" mode="scaleToFill"></image>
									<view class="bd">
										<view class="tit">{{item.title}}</view>
										<view class="ads">{{item.address}}</view>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item v-if="hotelList.length">
						<view class="swiper-slide swiper-live-slide">
							<view class="swiper-item-bar swiper-live-bar">
								<view class="tit">住哪里</view>
								<view class="more" @click="toHotelList">更多</view>
							</view>
							<view class="swiper-ul">
								<view class="li" v-for="(item, index) in hotelList" :key="item.id"
									@click="toDetail(item)">
									<image class="icon" v-if="index === 0"
										:src="'https://static.member.stourweb.cn/uniapp/static/images/' + 'live_icon_01.png'"
										mode="scaleToFill"></image>
									<image class="icon" v-if="index === 1"
										:src="'https://static.member.stourweb.cn/uniapp/static/images/' + 'live_icon_02.png'"
										mode="scaleToFill"></image>
									<image class="icon" v-if="index === 2"
										:src="'https://static.member.stourweb.cn/uniapp/static/images/' + 'live_icon_03.png'"
										mode="scaleToFill"></image>
									<image class="hd" :src="item.litpic" mode="scaleToFill"></image>
									<view class="bd">
										<view class="tit">{{item.title}}</view>
										<view class="ads">{{item.address}}</view>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<!-- 区域特色 -->
			<view class="destination-block" v-if="destinationList.length">
				<view class="destination-bar">
					<view class="tit">区域特色</view>
					<view class="more" @click="toDestinationHome">更多</view>
				</view>
				<view class="destination-wrap">
					<view class="dest-top">
						<template v-for="(item, index) in destinationList">
							<view class="item" v-if="index === 0" :key="item.id" @click="toDestination(item.id)">
								<image class="img" :src="item.litpic" mode="scaleToFill"></image>
								<view class="name">{{item.kindname}}</view>
								<view class="desc">{{item.jieshao}}</view>
							</view>
							<view class="item" v-if="index === 1" :key="item.id" @click="toDestination(item.id)">
								<image class="img" :src="item.litpic" mode="scaleToFill"></image>
								<view class="name">{{item.kindname}}</view>
								<view class="desc">{{item.jieshao}}</view>
							</view>
						</template>
					</view>
					<view class="dest-bottom" v-if="destinationList.length > 2">
						<template v-for="(item, index) in destinationList">
							<view class="item" v-if="index > 1" :key="item.id" @click="toDestination(item.id)">
								<image class="img" :src="item.litpic" mode="scaleToFill"></image>
								<view class="name">{{item.kindname}}</view>
								<view class="desc">{{item.jieshao}}</view>
							</view>
						</template>
					</view>
				</view>
			</view>

			<!-- 热门推荐 -->
			<view class="hot-tab-block">
				<view class="hot-tab-bar">热门推荐</view>
				<view class="hot-tab-fixed" :style="{top: stickyHeight + 'px'}">
					<v-tabs v-model="tabCurrent" :tabs="tabGroup" @change="clickTab" :activeColor="activeColor"
						lineHeight="8rpx" :lineScale="0.6" lineRadius="0" :lineColor="lineColor"></v-tabs>
				</view>
				<view class="product-group">

					<view class="content-left" id="contentLeft">
						<view class="product-banner">
							<image class="img" :src="item.adsrc" mode="scaleToFill"
								v-for="(item, index) in productBanner" :key="index" @click="toAds(item)"></image>
						</view>
						<template v-for="(item, index) in productList">
							<view class="product-group__item" v-if="index%2 === 0" :key="index" @click="toDetail(item)">
								<view class="hd">
									<view class="label">{{item.model_name}}</view>
									<image class="icon"
										:src="'https://static.member.stourweb.cn/uniapp/static/images/' + 'play.png'"
										mode="scaleToFill" v-if="item.has_video"></image>
									<image class="img" :src="item.litpic" mode="widthFix"></image>
								</view>
								<view class="title">{{item.title}}</view>
								<template v-if="item.typeid != 4 && item.typeid != 101 && item.typeid != 115">
									<view class="price" v-if="item.price > 0">¥<text class="num">{{item.price}}</text>起
									</view>
									<view class="price" v-else>电询</view>
								</template>
								<view class="source"
									v-if="item.typeid == 4 || item.typeid == 101 || item.typeid == 115">{{item.author}}
								</view>
							</view>
						</template>
					</view>

					<view class="content-right" id="contentRight">
						<template v-for="(item, index) in productList">
							<view class="product-group__item" v-if="index%2 !== 0" :key="index" @click="toDetail(item)">
								<view class="hd">
									<view class="label">{{item.model_name}}</view>
									<image class="icon"
										:src="'https://static.member.stourweb.cn/uniapp/static/images/' + 'play.png'"
										mode="scaleToFill" v-if="item.has_video"></image>
									<image class="img" :src="item.litpic" mode="widthFix"></image>
								</view>
								<view class="title">{{item.title}}</view>
								<template v-if="item.typeid != 4 && item.typeid != 101 && item.typeid != 115">
									<view class="price" v-if="item.price > 0">¥<text class="num">{{item.price}}</text>起
									</view>
									<view class="price" v-else>电询</view>
								</template>
								<view class="source"
									v-if="item.typeid == 4 || item.typeid == 101 || item.typeid == 115">{{item.author}}
								</view>
							</view>
						</template>
					</view>

				</view>

				<view class="hot-more-bar" @click="toDiscover">更多</view>

			</view>

		</view>

		<st-footer-filing></st-footer-filing>
		<!-- 底部备案信息 -->

		<st-customize-footer></st-customize-footer>
		<!-- 自定义tabBar -->
		<st-screen-advertising></st-screen-advertising>
		 <!-- 营销推荐 -->	
	</view>
</template>

<script>
	import {
		adsPath,
		adsClientNo
	} from '@/utils/ads.js'
	import {
		getProDetailPage
	} from '@/utils/toPath.js';
	import {
		check_app_install
	} from '@/utils/utils.js'
	import global_config from "@/config.js"
	import vTabs from '@/components/v-tabs/v-tabs.vue'
	import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'
	import stCustomizeFooter from "@/components/st-customize-footer.vue"
	export default {
		components: {
			vTabs,
			uniNoticeBar,
			stCustomizeFooter
		},
		props: {
			scrollTop: [Number, String]
		},
		data() {
			return {
				isFixed: false,
				stickyHeight: 0, // 导航栏高度
				menuBottom: 0, // 胶囊距底部间距
				menuHeight: 0, // 胶囊高度
				bannerList: [],
				navList: [],
				hotBanners: [],
				noticeText: '',
				ticketList: [],
				foodList: [],
				hotelList: [],
				destinationList: [],
				tabCurrent: 0,
				tabGroup: [],
				activeColor: "#2dbb55",
				lineColor: "#2dbb55",
				tabProducts: [],
				productList: [],
				productBanner: [],
				uniHotSearchDefault: '', //全局热搜词
				pageTitle: uni.getStorageSync('cfg_home_page_title'),
			}
		},
		created() {
			// #ifndef MP-TOUTIAO
			let {
				stickyHeight,
				menuBottom,
				menuHeight
			} = getApp().globalData
			this.stickyHeight = stickyHeight
			this.menuBottom = menuBottom
			this.menuHeight = menuHeight
			// #endif

			this.getBanner()
			this.getIndexNav()
			this.getHotBanner()
			this.getNotice()
			this.getPlayList()
			this.getHotDestination()
			this.getColunm()
			this.getProductBanner()
			// 全局热搜词
			this.uniHotSearchDefault = uni.getStorageSync('uniHotSearchDefault');
		},
		watch: {
			scrollTop(newVal, oldVal) {
				if (newVal > 200) {
					this.isFixed = true
				} else {
					this.isFixed = false
				}
			}
		},
		computed: {
			searchOffsetTop() {
				return this.stickyHeight - this.menuBottom - this.menuHeight
			},
			hasFoodApp() {
				return check_app_install('system_food')
			}
		},
		methods: {

			getDomeInfo() {
				return new Promise((resolve, reject) => {
					let query = uni.createSelectorQuery().in(this)
					setTimeout(() => {
						query.select('#contentLeft').boundingClientRect(res => {
							resolve(res)
						}).exec()
					}, 1000)
				})
			},

			// 全局搜索
			jumpGlobalSearch() {
				uni.navigateTo({
					url: './search'
				})
			},

			// 顶部大图banner
			async getBanner() {
				let res, client_no = adsClientNo(),
					params = {
						method: 'api/v2/system/new_ads',
						prefix: 's_index',
						client_no,
						custom_label: "uni_no311_index_banner"
					}
				res = await this.$http(params);
				if (res.status) {
					this.bannerList = res.data;
				}
			},

			// 首页导航
			async getIndexNav() {
				let res, client_no = adsClientNo(),
					params = {
						client_no,
						method: 'api/v2/index/index_nav',
					};
				res = await this.$http(params)
				if (res.status) {
					this.navList = res.data?.list
				}
			},

			// 前往导航所在页面
			toNavPage(item) {
				adsPath(item.type, item.m_typeid, item.product_id, item.m_url, item.m_title)
			},

			// 前往广告位的页面
			toAds(item) {
				adsPath(item.adtype, item.typeid, item.proid, item.adlink, item.adname);
			},

			// 热门活动
			async getHotBanner() {
				let res, client_no = adsClientNo(),
					params = {
						method: 'api/v2/system/new_ads',
						prefix: 's_index',
						client_no,
						custom_label: "uni_no311_index_sub"
					}
				res = await this.$http(params);
				if (res.status) {
					this.hotBanners = res.data;
				}
			},

			// 公告
			async getNotice() {
				let res,
					params = {
						method: 'api/v2/system/get_sys_configs',
						filed: "cfg_uni_index_notice"
					}
				res = await this.$http(params);
				if (res.status) {
					this.noticeText = res.data.cfg_uni_index_notice;
				}
			},

			// 必玩榜单
			async getPlayList() {
				let res,
					params = {
						method: 'api/v2/index/hot_product',
						typeid: "5,121,2",
						row: 3
					}
				res = await this.$http(params);
				if (res.status) {
					let [tickets, foods, hotels] = res.data
					this.ticketList = tickets.list
					this.foodList = foods.list
					this.hotelList = hotels.list
				}
			},

			// 景点列表跳转
			toTicketList() {
				uni.navigateTo({
					url: '/subPackages/spots/list'
				})
			},

			// 景点列表跳转
			toFoodList() {
				uni.navigateTo({
					url: '/subPackages/foods/list'
				})
			},

			// 景点列表跳转
			toHotelList() {
				uni.navigateTo({
					url: '/subPackages/hotels/list'
				})
			},

			// 热门目的地
			async getHotDestination() {
				let res,
					params = {
						method: 'api/v2/destination/get_hot',
						limit: 5
					}
				res = await this.$http(params);
				if (res.status) {
					this.destinationList = res.data
				}
			},

			// 目的地首页
			toDestinationHome() {
				uni.navigateTo({
					url: `/subPackages/destination/all`
				})
			},

			// 目的地跳转
			toDestination(id) {
				uni.navigateTo({
					url: `/subPackages/destination/detail?destId=${id}`
				})
			},

			// 产品列表banner
			async getProductBanner() {
				let res, client_no = adsClientNo(),
					params = {
						method: 'api/v2/system/new_ads',
						prefix: 's_index',
						client_no,
						custom_label: "uni_no311_index_bottom"
					}
				res = await this.$http(params);
				if (res.status) {
					this.productBanner = res.data;
				}
			},

			// 获取栏目导航
			async getColunm() {
				const {
					openProduct,
					openArticle
				} = global_config
				const openTypeIds = [...openProduct, ...openArticle].join(',')
				let res,
					params = {
						method: 'api/v2/index/hot_wenlv_index',
						open_type_ids: openTypeIds,
						row: 20
					}
				res = await this.$http(params)
				if (res.status) {
					let data = res.data;
					
					
					data.map(item =>{
						// #ifdef MP-TOUTIAO
						if( 
							item.typeid == 2 
							|| item.typeid == 5 
							|| item.typeid == 13 
							|| item.typeid == 23 
							|| item.typeid == 121
						){
							this.tabGroup.push(item.title);
							this.tabProducts.push(item.items);
						}
						// #endif
						// #ifndef MP-TOUTIAO
						this.tabGroup.push(item.title);
						this.tabProducts.push(item.items);
						// #endif
					})

					this.productList = this.tabProducts[0]
					let {
						height
					} = await this.getDomeInfo()
				}
			},


			// 切换栏目
			async clickTab(index) {
				this.productList = []
				this.productList = this.tabProducts[index]
				let {
					height
				} = await this.getDomeInfo()
			},

			// 前往产品详情页面
			toDetail(item) {
				let path;
				path = getProDetailPage(item.typeid, {
					id: item.id
				});
				if (path) {
					uni.navigateTo({
						url: path
					})
				}
			},

			toDiscover() {
				uni.navigateTo({
					url: '/subPackages/discover/index'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.fixed {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		z-index: 111;
		background: #fff;
	}

	.navigation-title-bar {
		position: absolute;
		left: 24rpx;
		bottom: 8rpx;
		height: 64rpx;
		line-height: 64rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.search-bar {
		color: #666;
		padding: 0 20rpx;
		position: absolute;
		left: 24rpx;
		right: 210rpx;
		/* #ifdef H5 */
		height: 32px !important;
		line-height: 32px !important;
		top: 20px !important;
		right: 24rpx;
		/* #endif */
		z-index: 3;
		border-radius: 120rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		background: rgba(255, 255, 255, .7);

		.icon {
			color: #c0c0c0;
			margin-right: 8rpx;
			font-size: $uni-font-size-base;
		}

		.desc {
			color: #999;
			font-size: 24rpx
		}
	}

	.page-wrapper {
		margin: 0 24rpx;
	}

	.banner {
		width: 750rpx;
		height: 880rpx;
		position: relative;

		.swiper,
		image {
			height: 880rpx;
		}

		image {
			display: block;
			width: 100%;
		}
	}

	.uni-nav-block {
		display: flex;
		flex-wrap: wrap;
		position: relative;
		z-index: 10;
		margin-top: -20%;
		margin-bottom: 30rpx;
		border-radius: 28rpx;
		background-color: rgba(255, 255, 255, .9);

		.uni-nav-item {
			width: 20%;
			padding: 20rpx 0;
			text-align: center;

			.icon {
				width: 80rpx;
				height: 80rpx;
				vertical-align: top;
			}

			.text {
				margin-top: 8rpx;
				font-size: $uni-font-size-sm;
			}
		}
	}

	/deep/ .uni-noticebar {
		margin-bottom: 30rpx;
		border-radius: 120px !important;
		background: #FFF8EF !important;
	}

	.hot-ad-block {
		margin-right: -24rpx;
		margin-bottom: 50rpx;

		.hot-ad-bar {
			padding-bottom: 30rpx;
			font-size: 36rpx;
			font-weight: bold;
		}

		.swiper-container {
			height: 190rpx;

			.item {
				.slide {
					.img {
						width: calc(100% - 10px);
						height: 190rpx;
					}
				}
			}

		}
	}

	.rank-block {
		margin-right: -24rpx;

		.rank-bar {
			padding-bottom: 30rpx;
			font-size: 36rpx;
			font-weight: bold;
		}
	}

	.swiper-rank-container {
		height: 660rpx;
	}


	.swiper-slide {
		width: calc(100% - 10px);
		overflow: hidden;
		border-radius: 24rpx;

		&.swiper-play-slide {
			background: linear-gradient(to bottom right, #EFE4DC, #FFF6EF);
		}

		&.swiper-food-slide {
			background: linear-gradient(to bottom right, #FFF8F7, #FCDFD9);
		}

		&.swiper-live-slide {
			background: linear-gradient(to bottom right, #E9DDFD, #F9F0FF);
		}
	}

	.swiper-item-bar {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		width: 100%;
		height: 160rpx;
		padding: 32rpx 24rpx 0;
		box-sizing: border-box;

		&.swiper-play-bar {
			background: url("https://static.member.stourweb.cn/uniapp/static/images/play_bg.png") center no-repeat;
			background-size: 100% 100%;

			.tit {
				color: #FFEED8;
			}

			.more {
				background: #F8D8BC;
			}
		}

		&.swiper-food-bar {
			background: url("https://static.member.stourweb.cn/uniapp/static/images/food_bg.png") center no-repeat;
			background-size: 100% 100%;

			.tit {
				color: #FF6545;
			}

			.more {
				background: #FFC1B6;
			}
		}

		&.swiper-live-bar {
			background: url("https://static.member.stourweb.cn/uniapp/static/images/live_bg.png") center no-repeat;
			background-size: 100% 100%;

			.tit {
				color: #AC3FFF
			}

			.more {
				background: #DFB6FF;
			}
		}

		.tit {
			color: #FFEED8;
			font-size: 38rpx;
			font-weight: bold;
		}

		.more {
			color: #333;
			padding: 3px 12rpx 3px 8rpx;
			font-size: 24rpx;
			border-radius: 8rpx;

			&::after {
				content: "";
				display: inline-block;
				width: 4px;
				height: 4px;
				vertical-align: middle;
				margin: -2px 0 0 2px;
				border-top: 1px solid #333;
				border-right: 1px solid #333;
				transform: rotate(45deg);
			}
		}
	}

	.swiper-ul {
		padding: 20rpx 12rpx;

		.li {
			display: flex;
			align-items: center;
			padding: 20rpx 12rpx;
			position: relative;

			.icon {
				position: absolute;
				top: 12rpx;
				left: 24rpx;
				z-index: 10;
				width: 20px;
				height: 20px;
				line-height: 20px;
				text-align: center;
				font-size: 24rpx;
				border-radius: 8rpx;
			}

			.hd {
				flex: 0 0 100rpx;
				width: 100rpx;
				height: 100rpx;
				border-radius: 16rpx;
			}

			.bd {
				flex: 0 0 400rpx;
				margin-left: 20rpx;

				.tit {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-bottom: 12rpx;
					font-size: 28rpx;
				}

				.ads {
					color: #666;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 24rpx;
				}
			}
		}
	}

	.destination-block {
		margin-bottom: 24rpx;

		.destination-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 30rpx;

			.tit {
				font-size: 36rpx;
				font-weight: bold;
			}

			.more {
				color: #2DBB55;
				font-size: 24rpx;

				&::after {
					display: inline-block;
					content: "";
					width: 0;
					height: 0;
					margin-left: 4px;
					border-left: 5px solid #2DBB55;
					border-bottom: 4px solid transparent;
					border-top: 4px solid transparent;
				}
			}
		}

		.destination-wrap {
			.dest-top {
				display: flex;

				.item {
					flex: 1 1 50%;
					height: 240rpx;
					position: relative;

					&:nth-child(2) {
						margin-left: 20rpx;
					}

					.img {
						width: 100%;
						height: 240rpx;
						border-radius: 12px;
					}

					.name {
						color: #fff;
						position: absolute;
						top: 24rpx;
						left: 24rpx;
						font-size: 32rpx;
						font-weight: bold;
						text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
					}

					.desc {
						color: #fff;
						position: absolute;
						top: 76rpx;
						left: 24rpx;
						right: 24rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 24rpx;
						text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
					}
				}
			}

			.dest-bottom {
				display: flex;
				margin-top: 20rpx;

				.item {
					flex: 1 1 auto;
					position: relative;
					margin-right: 20rpx;

					&:last-child {
						margin-right: 0;
					}

					.img {
						width: 100%;
						height: 280rpx;
						border-radius: 12px;
					}

					.name {
						color: #fff;
						position: absolute;
						top: 24rpx;
						left: 24rpx;
						font-size: 32rpx;
						font-weight: bold;
						text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
					}

					.desc {
						color: #fff;
						position: absolute;
						top: 76rpx;
						left: 24rpx;
						right: 24rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 24rpx;
						text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
					}
				}
			}
		}
	}

	.hot-tab-block {
		margin: 0 -24rpx !important;

		.hot-tab-bar {
			padding: 20rpx 24rpx;
			font-size: 36rpx;
			font-weight: bold;
		}

		.hot-tab-fixed {
			position: sticky;
			left: 0;
			right: 0;
			z-index: 12;
		}
	}

	.product-banner {
		padding-bottom: 28rpx;

		.img {
			width: 100%;
			height: 440rpx;
			border-radius: 14px;
		}
	}

	.product-group {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 24rpx 24rpx 0;

		.content-left,
		.content-right {
			width: calc(calc(100% - 10px) / 2);
		}

		&__item {
			padding-bottom: 28rpx;

			.hd {
				position: relative;
				width: 100%;

				.label {
					color: #fff;
					padding: 8rpx 20rpx;
					position: absolute;
					left: 20rpx;
					bottom: 20rpx;
					z-index: 10;
					font-size: 24rpx;
					border-radius: 40px;
					background: rgba(0, 0, 0, .5);
				}

				.icon {
					width: 30rpx;
					height: 30rpx;
					position: absolute;
					right: 20rpx;
					bottom: 24rpx;
				}

				.img {
					width: 100%;
					border-radius: 14px;
				}
			}

			.title {
				max-height: 72rpx;
				line-height: 36rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
				margin-top: 12rpx;
				font-size: 28rpx;
			}

			.price {
				color: #FF6913;
				margin-top: 12rpx;
				font-size: 24rpx;

				.num {
					font-size: 36rpx;
					font-weight: bold;
					font-family: Arial, Helvetica, sans-serif;
				}
			}

			.source {
				color: #999;
				margin-top: 12rpx;
				font-size: 24rpx;
			}
		}
	}

	.hot-more-bar {
		color: #2DBB55;
		padding: 24rpx 0;
		text-align: center;
		font-size: 24rpx;

		&::after {
			display: inline-block;
			content: "";
			width: 0;
			height: 0;
			margin-left: 4px;
			border-left: 5px solid #2DBB55;
			border-bottom: 4px solid transparent;
			border-top: 4px solid transparent;
		}
	}
</style>